<template>
  <div class="detail">
    <el-card>
      <div>
        <el-row align="middle">
          <el-col :span="4" style="text-align: center;"> <el-avatar :size="60" :src="$store.getters.avatar" /></el-col>
          <el-col :span="20">
            <el-tag
              key="离职"
              type="danger"
              effect="dark"
            >
              离职
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="height: 50px;">
          <el-col :span="18" :offset="4">
            入职时间: 最新工资： NaN
            <el-tooltip content="员工所有调薪后的基本工资、岗位工资合计" placement="bottom" effect="light">
              <span style="display: inline-block; width: 30px;" />
              <span class="icwenhao">?</span>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row style="height: 50px;">
          <el-col :span="18" :offset="4">
            当月基本工资 / 当月岗位工资: /
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row style="font-weight: bolder;">
          津贴
        </el-row>
        <div class="table">
          <el-row class="title">
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">津贴类型</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">补贴金额</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">津贴类型</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">补贴金额</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">交通补助</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ salarySettings.transportationSubsidyAmount }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">通讯补助</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ salarySettings.communicationSubsidyAmount }}</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">午餐补助</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ salarySettings.communicationSubsidyAmount }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">住房补助</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ salarySettings.housingSubsidyAmount }}</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
        </div>
        <el-row style="margin-top: 20px;" type="flex">
          <el-col :span="2" style="font-weight: bolder;">
            社保公积金
          </el-col>
          <el-col :span="2" :offset="3">
            企业 --
          </el-col>
          <el-col :span="2" :offset="3">
            个人 --
          </el-col>
        </el-row>

        <div class="table">
          <el-row class="title">
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">缴费项目</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">基数</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">企业缴纳</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light title">个人缴纳</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">社保</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.socialSecurityBase?ArchiveDetail.socialSecurityBase:'--' }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.socialSecurityEnterprise?ArchiveDetail.socialSecurityEnterprise:'--' }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.socialSecurityIndividual?ArchiveDetail.socialSecurityIndividual:'--' }}</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">公积金</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.providentFundBase?ArchiveDetail.providentFundBase:'--' }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.accumulationFundEnterpriseBase?ArchiveDetail.accumulationFundEnterpriseBase:'--' }}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">{{ ArchiveDetail.individualBaseOfProvidentFund?ArchiveDetail.individualBaseOfProvidentFund:'--' }}</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">缴费合计</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">--</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">--</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="span"><div class="grid-content bg-purple-light">--</div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
          </el-row>
        </div>

        <el-row style="margin-top: 20px;">
          <el-form label-width="200px">
            <el-form-item label="实际出勤天数（正式）：">
              <el-input disabled :value="AttendancesArchive.actualAtteOfficialDays" style="width: 45%;" />
            </el-form-item>
            <el-form-item label="计薪天数（正式）：">
              <el-input disabled :value="AttendancesArchive.salaryOfficialDays" style="width: 45%;" />
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSalarySettings } from '@/api/salarys'
import { getArchiveDetail } from '@/api/socialSecuritys'
import { getAttendancesArchive } from '@/api/attendance'
export default {
  data() {
    return {
      span: 4,
      salarySettings: {},
      ArchiveDetail: {},
      AttendancesArchive: {
        actualAtteOfficialDays: 0,
        salaryOfficialDays: 0
      },
      userId: this.$route.params.userId,
      yearMonth: this.$route.params.yearMonth
    }
  },
  created() {
    // 获取津贴信息
    this.getSalarySettings()
    // 获取社保信息
    this.getArchiveDetail()
    // 获取考勤信息
    this.getAttendancesArchive()
    // console.log('this.userId', this.userId)
    // console.log('this.yearMonth', this.yearMonth)
  },
  methods: {
    async getSalarySettings() {
      const res = await getSalarySettings()
      console.log('getSalarySettings', res)
      this.salarySettings = res
    },
    async getArchiveDetail() {
      try {
        const res = await getArchiveDetail({
          userId: this.userId,
          yearMonth: this.yearMonth
        })
        console.log('getArchiveDetail', res)
        this.ArchiveDetail = res
      } catch (err) {
        this.$message({
          type: 'error',
          message: err.response.data.message
        })
        console.log(err.response.data.message)
      }
    },
    async getAttendancesArchive() {
      try {
        const res = await getAttendancesArchive({
          userId: this.userId,
          yearMonth: this.yearMonth
        })
        console.log('getAttendancesArchive', res)
        this.AttendancesArchive = res
      } catch (err) {
        this.$message({
          type: 'error',
          message: err.response.data.message
        })
        console.log(err.response.data.message)
      }
    }

  }
}
</script>

<style>
    .detail{
        padding: 10px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 26px;
    }
    .bg-purple {
        /* background: #d3dce6; */
        /* background-color: #f9f9f9; */
    }
    .bg-purple-light {
        /* background: #e5e9f2; */
        /* background-color: #f9f9f9; */
        text-align: center;
        line-height: 26px;
    }
    .title{
        font-weight: bolder;
    }
    .table{
        background-color: #f9f9f9;
        padding: 20px 0;
        margin-top: 10px;
    }
    .icwenhao{
        width: 20px;
        height: 20px;
         border-radius: 50%;
         border: 1px gray solid;
         font-size: 14px;
         display: inline-block;
         text-align: center;
         line-height: 20px;
         color: gray;
         margin-left: 20px;
    }
</style>
